<template>
    <router-link :to="{name:'Card',params:{listId:data.boardListId,cardId:data.id}}" class="list-card" v-if="data" ref="card">
        <div class="list-card-cover"  v-if="data.coverPath"
             :style="`background-image: url(${server.staticPath}${data.coverPath})`"></div>
        <div class="list-card-title">{{data.name}}</div>
        <div class="list-card-badges">
            <div class="badge" v-if="data.destroyed">
                <span class="icon icon-description"></span>
            </div>
            <div class="badge" v-if="data.commentCount">
                <span class="icon icon-comment"></span>
                <span class="text">{{data.commentCount}}</span>
            </div>
            <div class="badge" v-if="Array.isArray(data.attachments)&&data.attachments.length>0">
                <span class="icon icon-attachment"></span>
                <span class="text">{{data.attachments.length}}</span>
            </div>
        </div>
    </router-link>
</template>

<script>
    export default {
        name: "TCard",
        props: {
            data: {
                type: Object
            }
        },
        computed: {
            server() {
                return this.$store.state.server
            },
        },
    }
</script>

<style scoped>

</style>
